<template>
  <div class="search-page">
    <div class="head-box">
      <div class="back-box" @click="back">
        <img src="../../assets/image/ic_back_black.png" alt="">
      </div>
      <div class="search-box">
        <input v-model="keyword" type="text" placeholder="请输入搜索内容" />
      </div>
      <div class="btn" @click="search">搜索</div>
    </div>
    <div class="content-box">
      <div v-if="this.goodsList.length != 0">
        <div class="goods-list" v-for="(item, index) in goodsList" :key="index">
          <div class="goods-img">
            <img
              :src="Config_ysy.img_url + item.images[0]"
              alt=""
              class="thumb"
            />
          </div>
          <div class="right">
            <div class="title">{{ item.goods_name }}</div>
            <div class="price">{{ item.present_price }}</div>
          </div>
        </div>
      </div>
      <div class="wu-content" v-else>
        <img src="../../assets/img/ss.png" alt="" />
        <p class="zw">暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { searchData } from "../../sever/request";
export default {
  data() {
    return {
      keyword: "",
      goodsList: [],
      token: "123",
      shop_id:'',
    };
  },
 moutend() {
    let store = this.$route.query;
    if (store.shop_id != undefined) {
      this.shop_id = store.shop_id;
    }
    if (store.token != "" && store.token != undefined) {
      this.token = store.token;
    }
  },


    created() {
    let store = this.$route.query;
    if (store.shop_id != undefined) {
      this.shop_id = store.shop_id;
    }
    if (store.token != "" && store.token != undefined) {
      this.token = store.token;
    }
  },

  methods: {
     back(){
        this.$router.go(-1)
      // uni.navigateBack();

     },

    search() {
      if (this.keyword == null || this.keyword == "") return;
      searchData({
        shop_id:this.shop_id,
        token: this.token,
        page: 1,
        key: this.keyword,
      }).then((res) => {
        if (res.data.code == 1) {
          this.goodsList = res.data.data.goods;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.search-page {
  width: 10rem;
  .head-box {
    margin:1.2rem 0.266667rem 0.266667rem 0.266667rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .back-box{
      width: 5%;
      img{
        width: .4rem;
        height: .5rem;
      }
    }
    .search-box {
      width: 70%;
      height: 0.833333rem;
      margin-left: .266667rem;
      background: #ccc;
      border-radius: 0.133333rem;
      input {
        width: 100%;
        height: 100%;
        border: none;
        background: #ccc;
        border-radius: 0.133333rem;
        text-align: center;
      }
    }
    .btn {
      width: 18%;
      height: 0.833333rem;
      cursor: pointer;
      background: #ccc;
      font-size: 0.4rem;
      color: #fff;
      text-align: center;
      line-height: 0.833333rem;
      margin-left: 2%;
      border-radius: 0.133333rem;
    }
  }
  .content-box {
    margin: 0.133333rem;
    .goods-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 9.33333rem;
      background-color: #fdfbfb;
      box-shadow: 0 0.04rem 0.093333rem 0 rgba(0, 0, 0, 0.84);
      border-radius: 0.133333rem;
      border: solid 0.026667rem #8a8a8a;
      opacity: 0.82;
      padding: 0.133333rem;
      .goods-img {
        width: 2.666667rem;
        height: 2.133333rem;
        .thumb {
          width: 2.666667rem;
          height: 2.133333rem;
        }
      }
      .right {
        margin-left: 0.266667rem;
        .title {
          width: 6.133333rem;
          height: 0.4rem;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
          font-size: 0.373333rem;
          color: #333;
          font-weight: bold;
          line-height: 0.373333rem;
        }
        .price {
          margin-top: 0.533333rem;
          font-size: 0.373333rem;
          color: #d2561a;
          margin-left: 0.133333rem;
        }
      }
    }
    .wu-content {
      margin: 6rem 4.266667rem 0 3.866667rem;
      text-align: center;
      img {
        width: 2rem;
        height: 2rem;
      }
      .zw {
        font-size: 0.32rem;
        color: #ccc;
        padding-top: 0.5rem;
        padding-left: 0.3rem;
      }
    }
  }
}
</style>